<!--直播模块-->
<template>
  <div class="outer">
    <p>直播课程</p>
    <el-tabs v-model="lzf" :tab-position="tabPosition" type="border-card" style="height: 350px;">
      <el-tab-pane name="0" label="研究生复试之高效准备简历的方法" class="tab">
        <div class="content">
          研究生复试之高效准备简历的方法
        </div>
      </el-tab-pane>
      <el-tab-pane name="1" label="十大经典排序之Part-6-完结篇" class="tab">
        <div class="content">
          十大经典排序之Part-6-完结篇
        </div>
      </el-tab-pane>
      <el-tab-pane name="2" label="jdk1.8-新特性之函数式接口与方法引用" class="tab">
        <div class="content">
          jdk1.8-新特性之函数式接口与方法引用
        </div>
      </el-tab-pane>
      <el-tab-pane name="3" label="定时任务补偿" class="tab">
        <div class="content">
          定时任务补偿
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Live",
  data() {
    return {
      tabPosition: 'right',
      lzf: ""
    };
  },
  mounted() {
    let doms = document.getElementsByClassName("el-tabs__item")
    setTimeout(() => {
      doms.forEach((item, index) => {
        item.onmouseover = () => {
          this.lzf = (index).toString()
        }
      })
    }, 100)

  }
}
</script>

<style scoped lang="less">
.outer {
  margin-top: 30px;
}

p {
  text-align: center;
}

.tab {
  height: 50px;

  .content {
    width: 600px;
    height: 350px;
  }
}

</style>

<style lang="less">
.el-tabs--right .el-tabs__header.is-right {
  width: 50%;
  background-color: #f4f4f4;
}

.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
  border-left: none;
}

.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active {
  border-color: #ffffff;
  color: #00cf8c;
  border-left: 4px solid #00cf8c;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
  color: #00cf8c;
}
</style>